import { PageContext } from "@/utils/PageContext";
import { RefObject, useContext, useRef } from "react";

/**
 * 提供一个自定义钩子，用于管理页面滚动。
 * 
 * @returns 返回一个对象，包含一个指向页面容器的引用 `pageContainerRef` 和一个用于平滑滚动到下一个页面区域的函数 `snapNext`。
 */
export const usePageScroll = (): {
    pageContainerRef: RefObject<HTMLDivElement>;
    snapNext: () => void;
  } => {
    // 创建一个对页面容器的引用，初始值为null
    const pageContainerRef = useRef<HTMLDivElement>(null);
    // 从PageContext上下文中获取根元素的引用
    const rootRef = useContext(PageContext) ;
    // 定义一个用于平滑滚动到下一个页面区域的函数
    const snapNext = () => {
      // 获取页面容器的引用
      const container = pageContainerRef.current ;
      // 获取容器相对于其父元素的顶部偏移量
      const offsetTop = container?.offsetTop;
      // 如果rootRef当前存在，则以平滑的方式滚动到容器的顶部
      rootRef.current&&rootRef.current.scrollTo({
        top: offsetTop,
        behavior: "smooth",
      });
    };
    // 返回pageContainerRef和snapNext函数
    return {
      pageContainerRef,
      snapNext,
    };
  };